<template>
  <div class="boxsty zhiBiao" v-if="shows">
    <div>
      <div :height="searchheight" v-if="showSearch">
        <span
          style="float: right; margin-top: -30px; cursor: pointer"
          @click="searchchangeadvanced"
          >{{ searchadvanced ? "收起" : "展开" }}
          <i
            :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          />
        </span>
        <div v-show="searchadvanced">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
            class="form-inline"
            v-if="showSearch"
          >
            <el-form-item label="">
              <el-checkbox-group v-model="dataForm.check">
                <el-checkbox
                  v-for="item in checkList"
                  :key="item.id"
                  :label="item.id"
                  style="width: 10%"
                >
                  <el-popover placement="top-start" width="200" trigger="hover">
                    <p>{{ item.name }}</p>
                    <span slot="reference">{{ item.name | ellipsis }}</span>
                  </el-popover>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="table-header-btn-box" style="text-align: right">
      <!-- <el-button plain type="primary" @click="saveZhibiao">保存</el-button> -->
      <el-button plain type="primary" @click="fnBackOldPage">关闭</el-button>
    </div>
    <div class="avue-crud">
      <el-table
        ref="zhibiaotable"
        style="width: 100%; margin-top: 20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
      >
        <el-table-column label="选择" type="selection" width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="60"
          header-align="center"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          show-overflow-tooltip
          align="center"
          min-width="120"
          label="被考核人姓名"
        >
          <template slot="header" slot-scope="scope">
            <span>被考核人姓名</span
            ><span class="mg-l10">({{ dataList.length }}人)</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in list"
          :key="index"
          align="center"
          :label="item.name"
        >
          <template slot="header" slot-scope="scope">
            <span>{{ item.name }}</span
            ><span class="mg-l10"
              >({{ dataList | filterNum(item, index) }}个)</span
            >
          </template>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="目标值"
          >
            <template slot-scope="scope">
              <!-- <span>{{ scope.row["targetValue" + (index + 1)] }}</span> -->
              <el-input
                v-if="scope.row.hasOwnProperty('targetValue' + (index + 1))"
                v-model="scope.row['targetValue' + (index + 1)]"
                placeholder="目标值"
                @change="
                  fnChangeMuB(
                    scope.row['targetValue' + (index + 1)],
                    'targetValue' + (index + 1)
                  )
                "
              ></el-input>

            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            min-width="100"
            align="center"
            label="单位"
          >
            <template slot-scope="scope">
              <span>{{ scope.row["unit" + (index + 1)] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="自评值"
          >
            <template slot-scope="scope">
              <span>{{ scope.row["zp_df" + (index + 1)] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="填报值"
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.hasOwnProperty('tb_sz' + (index + 1))"
                v-model="scope.row['tb_sz' + (index + 1)]"
                placeholder="填报值"
                @change="
                  fnChangeMuB(
                    scope.row['tb_sz' + (index + 1)],
                    'tb_sz' + (index + 1)
                  )
                "
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="他评得分"
          >
            <!--
                onkeyup="value=value.replace(/[^\d]/g,'')" -->
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.hasOwnProperty('tp_df' + (index + 1))"
                v-model="scope.row['tp_df' + (index + 1)]"
                placeholder="他评得分"
                @change="
                  fnChangeMuB(
                    scope.row['tp_df' + (index + 1)],
                    'tp_df' + (index + 1)
                  )
                "
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getZhibiaoCheckData,
  getZhibiaoData,
  saveZhibiaoData,
} from "@/api/hetongrenwu/book/bookPj";
export default {
  data() {
    return {
      dataForm: {
        check: [],
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      showSearch: true,
      checkList: [],
      searchadvanced: true,
      searchheight: "0",
      list: [],
      flag: "",
      idArray: "",
      ids: [],
      shows: false,
    };
  },
  watch: {
    "dataForm.check"(newValue) {
      //console.log(newValue);
      if (newValue.length > 0) {
        //交集
        this.idArray = "";
        newValue.forEach((ele, index) => {
          //console.log(ele);
          this.idArray = this.idArray + ele + ",";
        });
        //console.log(this.idArray);
        this.list = this.checkList.filter((x) => {
          return newValue.some((y) => {
            return x.id == y;
          });
        });
        this.getDataList();
      }
      if (newValue.length == 0) {
        this.list = [];
        this.dataList = [];
      }
    },
  },
  filters: {
    filterNum(dataList, listItem, index) {
      var num = 0;
      var arr = dataList.filter((item) => {
        return item["zbId" + (index + 1)];
      });
      num = arr.length;
      return num;
    },
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 5) {
        return value.slice(0, 5) + "...";
      }
      return value;
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    init(data) {
      this.list = [];
      this.checkList = [];
      this.ids = data;
      this.dataForm.check = [];
      this.shows = true;
      getZhibiaoCheckData({ ids: data }).then((response) => {
        this.checkList = response.data.data;
        this.checkList.forEach((ele) => {
          this.idArray = this.idArray + ele.id + ",";
        });
        console.log(this.checkList);
      });
    },
    // saveZhibiao() {
    //   saveZhibiaoData(this.dataList).then((response) => {
    //     this.$message.closeAll();
    //     this.$message.success("保存成功");
    //     this.fnBackOldPage();
    //   });
    // },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 获取数据列表
    getDataList() {
      var params = {
        zhibiaoId: this.idArray,
        ids: this.ids,
      };
      this.dataListLoading = true;
      getZhibiaoData(params).then((response) => {
        this.dataList = response.data.data;
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //返回原来的页面
    fnBackOldPage() {
      this.shows = false;
      this.$emit("fnBackOldPage", "返回原页面");
    },
    //复选框选中数据时批量更改目标值
    fnChangeMuB(val, prop) {
      console.log("prop:" + prop);
      var index = this.$refs.zhibiaotable.selection.length;
      var selectedData = this.$refs.zhibiaotable.selection;
      if (selectedData.length > 0) {
        selectedData.forEach((item) => {
          item[prop] = val;
          index--;
          console.log(item);
        });
      }
      console.log(index);
      if (index == 0) {
        saveZhibiaoData(this.dataList).then((response) => {
          this.$message.closeAll();
          this.$message.success("保存成功！");
        });
      }
    },
  },
};
</script>
